<template>
	<view class="login">
		<view class="login-image">
			<image :src="imageUrl + 'login.png'" mode="aspectFill"></image>
		</view>
		<view class="login-form">
			<view class="toShow"></view>
			<button v-if="!phoneAuthPopup" class="login-button" bindtap="getUserProfile" @click="getUserProfile">授 权
				登 录</button>
			<view class="toop" v-if="phoneAuthPopup">
				<div class="tips">为了更好地用户体验，需要您授权手机号</div>
				<button class="login-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">去 登 录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLoginApi,
		getUserInfo,
		getSnowInfo
	} from '@/api/login.js'

	import {
		setToken,
		setRefreshToken,
		setUserInfo,
		setHasLogin,
		setSnowToken
	} from '@/utils/storage';

	import imageConfig from '@/utils/images.js'
	export default {
		data() {
			return {
				imageUrl:imageConfig.uploadImageUrl,
				// 是否展示手机号码授权弹窗，默认第一步不展示，要先获取用户基础信息
				phoneAuthPopup: false,
				//微信返回信息，用于揭秘信息，获取sessionkey
				code: "",
				//微信昵称
				nickName: "",
				//微信头像
				image: "",
				// 加密算法的初始向量
				iv: "",
				// 包括敏感数据在内的完整用户信息的加密数据
				encryptedData: "",
			}
		},
		created() {},
		methods: {
			//获取用户信息
			getUserProfile(e) {
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true, // 微信登录仅请求授权认证
					success: (res) => {
						// console.log('res---------: ', res)
						this.code = res.code
					}
				})
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				uni.getUserProfile({
					withCredentials:true,
					desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (resp) => {
						// console.log('resp--------: ', resp)
						this.nickName = resp.userInfo.nickName
						this.image = resp.userInfo.avatarUrl
						this.iv = resp.iv
						this.encryptedData = resp.encryptedData
						this.phoneAuthPopup = true
					}
				})
			},
			//获取手机号授权
			getPhoneNumber(e) {
				console.log('e--------: ', e)
				this.iv = e.detail.iv;
				this.encryptedData = e.detail.encryptedData;
				if (!e.detail.encryptedData) {
					uni.showToast({
						title: "为了更好地用户体验，需要您授权手机号！",
						icon: "none",
					})
					return
				}
				this.getmpAutoLogin()
			},
			// 授权登录
			getmpAutoLogin() {
				getLoginApi({
					code: this.code,
					encryptedData: this.encryptedData,
					iv: this.iv,
					image: this.image,
					nickName: this.nickName,
				}).then(res => {
					setToken(res.msg);
					setRefreshToken(res.msg);
					console.log(res, 'res')
					if (res.code == 200) {
						uni.showToast({
							title: "登录成功!",
							icon: "none",
						});
						// 获取用户信息
						getUserInfo().then((user) => {
							setUserInfo(user.data)
							setHasLogin(true)
							uni.switchTab({
								url: '/pages/index/index'
							})
						})
						// 获取雪场信息
						// getSnowInfo().then((res) => {
						// 	console.log(res, 'getSnowInfo')
						// 	if (res.code === 200) {
						// 		if(!res.data) {
						// 			uni.showToast({
						// 				title: "当前城市无雪场",
						// 				icon:"error"
						// 			})
						// 		}
						// 		setSnowToken(res.data.id);
						// 	} else {
						// 		uni.showToast({
						// 			title: "雪场信息获取失败"
						// 		})
						// 	}
						// })
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.login {
		width: 100VW;
		height: 100VH;
		position: relative;

		.login-image {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
				background-color: #FFFFFF;
			}
		}

		.login-form {
			position: absolute;
			width: 100VW;
			height: 100VH;
			left: 0;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.toShow {
				min-height: 50VH;
			}

			.login-button {
				width: 612rpx;
				height: 100rpx;
				background: linear-gradient(0deg, #6975DD 0%, #7355B0 100%);
				border-radius: 50rpx;
				font-size: 33rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #FFFFFF;
				padding: 0;
				line-height: 100rpx;
				text-align: center;
			}

			.toop {
				width: 700rpx;
				height: 340rpx;
				border-radius: 15rpx;
				background-color: rgba(0, 0, 0, .5);
				color: #FFFFFF;
				bottom: 280rpx;
				position: absolute;

				// 弹窗样式
				.register {
					width: 200rpx;
					height: 80rpx;
					font-size: 36rpx;
					padding: 0;
					line-height: 80rpx;
				}

				.tips {
					width: 80%;
					margin: 6% 10%;
					margin-top: 48rpx;
					line-height: 1.75;
					text-align: left;
				}
			}
		}
	}
</style>